<template>
  <!-- 添加外层控制容器 -->
  <div class="carousel-wrapper">
    <el-carousel :interval="2000" type="card" :height="height + 'px'"  class="carousel">
      <el-carousel-item v-for="(item, index) in imgUrls" :key="index">
        <img :src="item" alt="轮播图" class="carousel-image" />
      </el-carousel-item> 
    </el-carousel>
        <div class="left-tabs-wrapper">
          <!-- 使用 Element UI 的 Tabs 组件 -->
          <el-tabs tab-position="left" class="left-tabs" >
            <el-tab-pane label="单点" class="scroll-container">
              <el-scrollbar height="100vh" class="custom-scrollbar">
                <div class="goods-list">
                  <Shang-Pin
                    v-for="(item, index) in goodsList"
                    :key="index"
                    :goods-info="item"
                    style="width: 100%; height: 100%"
                  ></Shang-Pin>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="加料">煎蛋</el-tab-pane>
            <el-tab-pane label="套餐">双拼</el-tab-pane>
          
          </el-tabs>
        </div>
  </div>
</template>

<script>
import ShangPin from './Shang-Pin.vue';

export default {
  components: {
    ShangPin
  },

  data() {
    return {
      height: 200, // 轮播图高度
      imgUrls: [
        'https://www.hrg666.top/api/getimgs/1.jpg',
        'https://www.hrg666.top/api/getimgs/2.jpg',
        'https://www.hrg666.top/api/getimgs/3.jpg',
        'https://www.hrg666.top/api/getimgs/4.jpg',
        'https://www.hrg666.top/api/getimgs/5.jpg',
      ],
      goodsList: [
        { id: 1, name: '烧鸭', sales: 100, imgUrl: 'https://www.hrg666.top/api/getimgs/1.jpg' },
        { id: 2, name: '白切鸡', sales: 200, imgUrl: 'https://www.hrg666.top/api/getimgs/2.jpg' },
        { id: 3, name: '红烧肉', sales: 150, imgUrl: 'https://www.hrg666.top/api/getimgs/3.jpg' },
        { id: 4, name: '清蒸鱼', sales: 80, imgUrl: 'https://www.hrg666.top/api/getimgs/4.jpg' },
        // 添加更多商品数据...
      ]

    }
  }
}
</script>

<style scoped>

/* 穿透修改 Element UI 内部样式 */
:deep(.el-carousel) {
  width: 100%;
}



/* 图片样式 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 关键修改：改为覆盖模式 */
  object-position: center;
  border-radius: 4px;
}

/* 轮播样式 */
.carousel{
  background-color: rgb(218, 220, 222);
}
/* 左侧选项卡样式 */
.left-tabs {
  width: 100%;
  padding-top: 10px;
  height: 100vh;
  background-color: rgb(218, 220, 222);

}


.left-tabs.el-tabs--left :deep(.el-tabs__nav-scroll) {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  

}
/* 方案 1：提升特异性 + 深度选择器 */
.left-tabs.el-tabs--left :deep(.el-tabs__item) {
  padding: 30px 20px;
  margin: 0;

  /* display: block !important;  */

}
.left-tabs.el-tabs--left :deep(.el-tabs__item:hover) {
  background-color: #ffffff;
  border-radius: 10px; /* 圆角 */
  color: #12202e;
  font-weight: bold; /* 加粗 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
  
}
/* el-tabs__content */
.left-tabs.el-tabs--left :deep(.el-tabs__content) {
  width: 100vw;
  height: 100%;
  padding-bottom: 200px;
  background-color: #ffffff;
}



/* 滚动条容器 */
.custom-scrollbar {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
}

/* 滚动条轨道 */
:deep(.el-scrollbar__bar.is-vertical) {
  width: 5px;
  right: 2px;
}

/* 滚动条滑块 */
:deep(.el-scrollbar__thumb) {
  background: linear-gradient(45deg, #409eff, #79bbff);
  border-radius: 4px;
  transition: all 0.3s;
}

:deep(.el-scrollbar__thumb:hover) {
  background: linear-gradient(45deg, #79bbff, #409eff);
  width: 10px;
}




</style>